<template>
  <div class="container">
    <div class="year-selector">
      <el-date-picker
        v-model="selectedYear"
        type="year"
        placeholder="选择年份"
        @change="handleYearChange"
      />
    </div>
    
    <div class="calendar-grid">
      <div 
        v-for="month in 12" 
        :key="month" 
        class="calendar-item"
      >
        <el-calendar
          :model-value="getCalendarDate(month)"
          :range="[getCalendarDate(month), getLastDayOfMonth(month)]"
        >
          <template #header="{ date }">
            <div class="calendar-header">
              {{ formatMonth(date) }}
            </div>
          </template>
        </el-calendar>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { ElCalendar, ElDatePicker } from 'element-plus';

const selectedYear = ref(new Date());

const handleYearChange = (val) => {
  selectedYear.value = val;
};

const getCalendarDate = (month) => {
  return new Date(
    selectedYear.value.getFullYear(),
    month - 1,
    1
  );
};

const getLastDayOfMonth = (month) => {
  return new Date(
    selectedYear.value.getFullYear(),
    month,
    0
  );
};

const formatMonth = (date) => {
  return date.toLocaleString('default', {
    month: 'long',
    year: 'numeric'
  });
};

</script>

<style scoped>
.container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px;
}

.year-selector {
  margin-bottom: 20px;
  text-align: center;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.calendar-item {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  overflow: hidden;
}

.calendar-header {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  color: #409eff;
}

/* 隐藏默认导航按钮 */
:deep(.el-calendar__button-group) {
  display: none;
}

/* 调整日历表格样式 */
:deep(.el-calendar-table .el-calendar-day) {
  height: 40px;
  padding: 5px;
}
</style>